<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Surface Chart (2)</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Surface Chart (2)</p>
<hr class="separator">
<div class="content">
<img src="images/surface2.jpg" width='720' height='540'>
<br><br>
This example extends the <a href="surface.htm">Surface Chart (1)</a> example by adding surface grid and contour lines, and using alternative view angles and continuous coloring.<br><br>
<ul><li> The alternative view angles are set using <a href="ThreeDChart.setViewAngle.htm">ThreeDChart.setViewAngle</a>.<br><br>
<li> The surface grid lines are added using <a href="SurfaceChart.setSurfaceAxisGrid.htm">SurfaceChart.setSurfaceAxisGrid</a>.<br><br>
<li> The contour lines are added using <a href="SurfaceChart.setContourColor.htm">SurfaceChart.setContourColor</a>.<br><br>
<li> Note that for both the surface grid and contour lines, semi-transparent line colors are used to make the lines look thin and light.<br><br>
<li> Continuous coloring are configured using <a href="ColorAxis.setColorGradient.htm">ColorAxis.setColorGradient</a>.</ul>
</div>
<p class="heading1a">Source Code Listing</p>
<div class="content">
<b>[JSP Version]</b> jspdemo/surface2.jsp
<div class='codeblock'><code class='pre'>&lt;%@page import="ChartDirector.*, java.util.*" %&gt;
&lt;%
// The x and y coordinates of the grid
double[] dataX = {0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0};
double[] dataY = {0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0};

// The values at the grid points. In this example, we will compute the values using the formula z =
// sin((x - 0.5) * 2 * pi) * sin((y - 0.5) * 2 * pi)
double[] dataZ = new double[dataX.length * dataY.length];
for(int yIndex = 0; yIndex &lt; dataY.length; ++yIndex) {
    double y = (dataY[yIndex] - 0.5) * 2 * 3.1416;
    for(int xIndex = 0; xIndex &lt; dataX.length; ++xIndex) {
        double x = (dataX[xIndex] - 0.5) * 2 * 3.1416;
        dataZ[yIndex * dataX.length + xIndex] = Math.sin(x) * Math.sin(y);
    }
}

// Create a SurfaceChart object of size 720 x 540 pixels
SurfaceChart c = new SurfaceChart(720, 540);

// Add a title to the chart using 20 points Times New Roman Italic font
c.addTitle("Quantum Wave Function", "Times New Roman Italic", 20);

// Set the center of the plot region at (360, 245), and set width x depth x height to 360 x 360 x
// 270 pixels
c.setPlotRegion(360, 245, 360, 360, 270);

// Set the elevation and rotation angles to 20 and 30 degrees
c.setViewAngle(20, 30);

// Set the data to use to plot the chart
c.setData(dataX, dataY, dataZ);

// Spline interpolate data to a 80 x 80 grid for a smooth surface
c.setInterpolation(80, 80);

// Set surface grid lines to semi-transparent black (dd000000)
c.setSurfaceAxisGrid(0xdd000000);

// Set contour lines to semi-transparent white (80ffffff)
c.setContourColor(0x80ffffff);

// Add a color axis (the legend) in which the left center is anchored at (645, 270). Set the length
// to 200 pixels and the labels on the right side. Use smooth gradient coloring.
c.setColorAxis(645, 270, Chart.Left, 200, Chart.Right).setColorGradient();

// Set the x, y and z axis titles using 10 points Arial Bold font
c.xAxis().setTitle("x/L(x)", "Arial Bold", 10);
c.yAxis().setTitle("y/L(y)", "Arial Bold", 10);
c.zAxis().setTitle("Wave Function Amplitude", "Arial Bold", 10);

// Output the chart
WebChartViewer viewer = new WebChartViewer(request, "chart1");
viewer.setChart(c, Chart.SVG);

// Include tool tip for the chart
viewer.setImageMap(c.getHTMLImageMap("", "",
    "title='&lt;*cdml*&gt;&lt;*b*&gt;X: {x|2}&lt;*br*&gt;Y: {y|2}&lt;*br*&gt;Z: {z|2}'"));
%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Surface Chart (2)&lt;/title&gt;
    &lt;!-- Include ChartDirector Javascript Library to support chart interactions --&gt;
    &lt;script type="text/javascript" src="cdjcv.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin:5px 0px 0px 5px"&gt;
    &lt;div style="font:bold 18pt verdana;"&gt;
        Surface Chart (2)
    &lt;/div&gt;
    &lt;hr style="border:solid 1px #000080; background:#000080" /&gt;
    &lt;div style="font:10pt verdana; margin-bottom:1.5em"&gt;
        &lt;a href="viewsource.jsp?file=&lt;%=request.getServletPath()%&gt;"&gt;View Source Code&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- ****** Here is the chart image ****** --&gt;
    &lt;%= viewer.renderHTML(response) %&gt;
&lt;/body&gt;
&lt;/html&gt;</code></div>
</div>
<br><hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div>
</body>
</HTML>
